import React from 'react';
import { Table, Tooltip, Tag } from 'antd';
import { InfoCircleOutlined, LinkOutlined, CalendarOutlined, UserOutlined, FileTextOutlined } from '@ant-design/icons';

// 添加自定义样式
const customTooltipStyle = `
.ant-tooltip.custom-tooltip {
    max-width: 400px !important;
}
.ant-tooltip.custom-tooltip .ant-tooltip-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.ant-tooltip.custom-tooltip .ant-tooltip-inner {
    background: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    color: #262626 !important;
    min-height: auto !important;
}
.ant-tooltip.custom-tooltip .ant-tooltip-arrow {
    display: none !important;
}
.ant-tooltip.custom-tooltip .ant-tooltip-arrow::before,
.ant-tooltip.custom-tooltip .ant-tooltip-arrow::after {
    display: none !important;
}

/* 分组表头样式 */
.grouped-header-table .ant-table-thead > tr > th {
    background: linear-gradient(90deg, #fafafa 0%, #f0f0f0 100%) !important;
    border-bottom: 2px solid #d9d9d9 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 8px !important;
}

.grouped-header-table .ant-table-thead > tr:first-child > th {
    background: linear-gradient(90deg, #e6f7ff 0%, #bae7ff 100%) !important;
    border-bottom: 2px solid #1890ff !important;
    color: #1890ff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-align: center !important;
    padding: 16px 8px !important;
}

.grouped-header-table .ant-table-thead > tr:last-child > th {
    background: #fafafa !important;
    border-bottom: 1px solid #d9d9d9 !important;
    font-size: 13px !important;
    padding: 10px 8px !important;
}

.grouped-header-table .ant-table-tbody > tr:hover > td {
    background: #f5f5f5 !important;
}

.grouped-header-table .ant-table-tbody > tr > td {
    padding: 12px 8px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
`;

// 注入样式
if (typeof document !== 'undefined') {
    const styleId = 'custom-tooltip-style';
    if (!document.getElementById(styleId)) {
        const style = document.createElement('style');
        style.id = styleId;
        style.textContent = customTooltipStyle;
        document.head.appendChild(style);
    }
}

// 格式化时间的函数
const formatTime = (timeStr: string): string => {
    if (!timeStr) return '-';
    
    try {
        // 处理 "Fri Jun 06 10:07:43 CST 2025" 格式
        const date = new Date(timeStr);
        if (isNaN(date.getTime())) return timeStr;
        
        // 格式化为更易读的格式
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        
        return `${year}-${month}-${day} ${hours}:${minutes}`;
    } catch (error) {
        return timeStr;
    }
};

interface UnitInfoLike {
    gitRepoUrl?: string;
    defaultBranch?: string;
}

// 构建Git仓库URL的函数（兼容 GitHub/GitLab 常见路径）
const buildGitUrl = (record: any, unitInfo?: UnitInfoLike | null): string => {
    const filePath: string | undefined = record?.filePath;
    if (!filePath) return '';

    const repoUrl = unitInfo?.gitRepoUrl || '';
    if (!repoUrl) return '';

    const cleanRepo = repoUrl.replace(/\.git$/i, '');
    const branch = unitInfo?.defaultBranch || 'master';

    // GitLab 使用 /-/blob，GitHub 使用 /blob
    const isGitlab = /gitlab/i.test(cleanRepo);
    const blobSegment = isGitlab ? '/-/blob' : '/blob';

    const startLine = record.startLine ? `#L${record.startLine}` : '';
    const endLine = record.endLine ? `-L${record.endLine}` : '';

    return `${cleanRepo}${blobSegment}/${encodeURIComponent(branch)}/${filePath}${startLine}${endLine}`;
};

const getColumns = (unitInfo?: UnitInfoLike | null) => [
    {
        title: '基本信息',
        children: [
            { 
                title: '包名', 
                dataIndex: 'packageName', 
                key: 'packageName',
                width: 180,
                render: (packageName: string) => packageName || '-'
            },
            { 
                title: '类名', 
                dataIndex: 'className', 
                key: 'className',
                width: 150,
                render: (className: string) => className || '-'
            },
            {
                title: '方法名',
                dataIndex: 'methodName',
                key: 'methodName',
                width: 180,
        render: (methodName: string, record: any) => {
            const gitUrl = buildGitUrl(record, unitInfo);
            
            return (
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span>{methodName}</span>
                    <Tooltip
                        title={
                            <div style={{ 
                                width: '380px', 
                                textAlign: 'left',
                                backgroundColor: '#ffffff',
                                padding: '16px',
                                borderRadius: '8px',
                                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
                                border: '1px solid #f0f0f0'
                            }}>
                                {/* 标题 */}
                                <div style={{ 
                                    fontSize: '16px', 
                                    fontWeight: '600', 
                                    marginBottom: '16px',
                                    color: '#1890ff',
                                    borderBottom: '1px solid #f0f0f0',
                                    paddingBottom: '8px',
                                    display: 'flex',
                                    alignItems: 'center'
                                }}>
                                    <FileTextOutlined style={{ marginRight: '8px', fontSize: '16px' }} />
                                    方法详情
                                </div>
                                
                                {/* 基本信息 */}
                                <div style={{ marginBottom: '16px' }}>
                                    <div style={{ 
                                        marginBottom: '12px',
                                        padding: '8px',
                                        backgroundColor: '#fafafa',
                                        borderRadius: '4px',
                                        border: '1px solid #f0f0f0'
                                    }}>
                                        <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>方法签名</div>
                                        <div style={{ 
                                            fontFamily: 'monospace', 
                                            fontSize: '12px', 
                                            color: '#262626',
                                            backgroundColor: '#ffffff',
                                            padding: '6px 8px',
                                            borderRadius: '4px',
                                            border: '1px solid #e8e8e8',
                                            wordBreak: 'break-all'
                                        }}>
                                            {record.methodSignature || '-'}
                                        </div>
                                    </div>
                                    
                                    <div style={{ display: 'flex', gap: '16px', marginBottom: '12px' }}>
                                        <div style={{ flex: 1 }}>
                                            <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>行号范围</div>
                                            <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                                                {(() => {
                                                    const startLine = record.startLine || '-';
                                                    const endLine = record.endLine || '-';
                                                    const displayText = startLine === endLine ? startLine : `${startLine}-${endLine}`;
                                                    const gitUrl = buildGitUrl(record, unitInfo);
                                                    
                                                    if (gitUrl) {
                                                        return (
                                                            <a
                                                                href={gitUrl}
                                                                target="_blank"
                                                                rel="noopener noreferrer"
                                                                style={{ 
                                                                    color: '#1890ff', 
                                                                    textDecoration: 'none',
                                                                    display: 'flex',
                                                                    alignItems: 'center',
                                                                    gap: '4px'
                                                                }}
                                                            >
                                                                <Tag color="blue" style={{ margin: 0, fontSize: '11px', cursor: 'pointer' }}>
                                                                    {record.startLine || '-'}
                                                                </Tag>
                                                                <span style={{ color: '#8c8c8c', fontSize: '12px' }}>至</span>
                                                                <Tag color="blue" style={{ margin: 0, fontSize: '11px', cursor: 'pointer' }}>
                                                                    {record.endLine || '-'}
                                                                </Tag>
                                                                <LinkOutlined style={{ fontSize: '12px', marginLeft: '4px' }} />
                                                            </a>
                                                        );
                                                    } else {
                                                        return (
                                                            <>
                                                                <Tag color="blue" style={{ margin: 0, fontSize: '11px' }}>
                                                                    {record.startLine || '-'}
                                                                </Tag>
                                                                <span style={{ color: '#8c8c8c', fontSize: '12px' }}>至</span>
                                                                <Tag color="blue" style={{ margin: 0, fontSize: '11px' }}>
                                                                    {record.endLine || '-'}
                                                                </Tag>
                                                            </>
                                                        );
                                                    }
                                                })()}
                                            </div>
                                        </div>
                                        <div style={{ flex: 1 }}>
                                            <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>是否入口</div>
                                            <Tag color={record.isEntry ? 'green' : 'default'} style={{ margin: 0 }}>
                                                {record.isEntry ? '是' : '否'}
                                            </Tag>
                                        </div>
                                    </div>
                                    
                                    <div style={{ display: 'flex', gap: '16px' }}>
                                        <div style={{ flex: 1 }}>
                                            <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>服务类型</div>
                                            <div style={{ fontSize: '13px', color: '#262626' }}>
                                                {record.serviceType || '-'}
                                            </div>
                                        </div>
                                        <div style={{ flex: 1 }}>
                                            <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>服务名</div>
                                            <div style={{ fontSize: '13px', color: '#262626' }}>
                                                {record.serviceName || '-'}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                {/* 提示信息 */}
                                <div style={{ 
                                    backgroundColor: '#e6f7ff', 
                                    padding: '12px', 
                                    borderRadius: '6px',
                                    border: '1px solid #bae7ff',
                                    fontSize: '12px',
                                    color: '#0958d9',
                                    display: 'flex',
                                    alignItems: 'center'
                                }}>
                                    <span style={{ marginRight: '6px', fontSize: '14px' }}>💡</span>
                                    悬停时间字段查看详细修改和调用信息
                                </div>
                            </div>
                        }
                        placement="right"
                        overlayStyle={{ maxWidth: '400px' }}
                    >
                        <InfoCircleOutlined 
                            style={{ 
                                color: '#1890ff', 
                                cursor: 'pointer',
                                fontSize: '14px'
                            }} 
                        />
                    </Tooltip>

                </div>
            );
        }
            }
        ]
    },
    {
        title: '服务信息',
        children: [
            { 
                title: '服务类型', 
                dataIndex: 'serviceType', 
                key: 'serviceType',
                width: 100,
        render: (serviceType: string) => {
            if (!serviceType) return '-';
            
            const typeConfig = {
                'REST': { text: 'REST', color: 'blue', desc: 'REST接口方法' },
                'DUBBO': { text: 'DUBBO', color: 'green', desc: 'Dubbo接口方法' },
                'MAIN': { text: 'MAIN', color: 'orange', desc: 'main方法' },
                'NONE': { text: 'NONE', color: 'default', desc: '非入口方法' }
            };
            
            const config = typeConfig[serviceType as keyof typeof typeConfig] || { text: serviceType, color: 'default', desc: '' };
            
            return (
                <Tag color={config.color} title={config.desc}>
                    {config.text}
                </Tag>
            );
        }
            },
            { 
                title: '服务名', 
                dataIndex: 'serviceName', 
                key: 'serviceName',
                width: 180,
                render: (serviceName: string) => serviceName || '-'
            },
            { 
                title: '是否入口', 
                dataIndex: 'isEntry', 
                key: 'isEntry',
                width: 80,
        render: (isEntry: boolean, record: any) => {
            // 根据服务类型和isEntry字段来确定显示
            const serviceType = record.serviceType;
            let displayValue = isEntry;
            let color = isEntry ? 'green' : 'default';
            
            // 根据后端逻辑，REST、DUBBO、MAIN都是入口方法，NONE是非入口方法
            if (serviceType === 'REST' || serviceType === 'DUBBO' || serviceType === 'MAIN') {
                displayValue = true;
                color = 'green';
            } else if (serviceType === 'NONE') {
                displayValue = false;
                color = 'default';
            }
            
            return (
                <Tag color={color}>
                    {displayValue ? '是' : '否'}
                </Tag>
            );
        }
            }
        ]
    },
    {
        title: '变更历史',
        children: [
            {
                title: () => (
                    <span>
                        📅 累计无修改时间（天）
                    </span>
                ),
                dataIndex: 'noCodeChangeDurationDays',
                key: 'noCodeChangeDurationDays',
                width: 150,
                sorter: true,
                sortDirections: ['descend', 'ascend'] as any,
        render: (days: number, record: any) => {
            const displayDays = days !== undefined && days !== null ? `${days}天` : '-';
            
            // 构建详细信息tooltip
            const tooltipContent = (
                <div style={{ 
                    width: '280px', 
                    textAlign: 'left',
                    backgroundColor: '#ffffff',
                    padding: '16px',
                    borderRadius: '8px',
                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                    border: '1px solid #f0f0f0'
                }}>
                    <div style={{ 
                        fontSize: '14px', 
                        fontWeight: '600', 
                        marginBottom: '12px', 
                        color: '#1890ff',
                        borderBottom: '1px solid #f0f0f0',
                        paddingBottom: '6px'
                    }}>
                        📝 最近修改详情
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '60px' }}>修改人：</span>
                            <span style={{ fontSize: '12px', color: '#262626', fontWeight: '500' }}>
                                {record.gitLastEditEmp || '-'}
                            </span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '60px' }}>修改时间：</span>
                            <span style={{ fontSize: '12px', color: '#262626' }}>
                                {formatTime(record.gitLastEditTime)}
                            </span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '60px' }}>提交ID：</span>
                            {record.gitLastEditCommitId && unitInfo?.gitRepoUrl ? (
                                <a 
                                    href={`${unitInfo.gitRepoUrl.replace(/\.git$/i, '')}${/gitlab/i.test(unitInfo.gitRepoUrl) ? '/-/commit/' : '/commit/'}${record.gitLastEditCommitId}`}
                                    target="_blank" 
                                    rel="noopener noreferrer"
                                    style={{ 
                                        color: '#1890ff', 
                                        fontSize: '12px', 
                                        fontFamily: 'monospace',
                                        textDecoration: 'underline',
                                        padding: '2px 6px',
                                        backgroundColor: '#f0f9ff',
                                        borderRadius: '4px',
                                        border: '1px solid #bae7ff'
                                    }}
                                >
                                    {record.gitLastEditCommitId.substring(0, 8)}
                                </a>
                            ) : (
                                <span style={{ 
                                    fontSize: '12px', 
                                    color: '#262626', 
                                    fontFamily: 'monospace',
                                    padding: '2px 6px',
                                    backgroundColor: '#f5f5f5',
                                    borderRadius: '4px'
                                }}>
                                    {record.gitLastEditCommitId ? record.gitLastEditCommitId.substring(0, 8) : '-'}
                                </span>
                            )}
                        </div>
                        <div>
                            <div style={{ color: '#8c8c8c', fontSize: '12px', marginBottom: '4px' }}>提交信息：</div>
                            <div style={{ 
                                fontSize: '12px', 
                                color: '#262626', 
                                backgroundColor: '#f9f9f9',
                                padding: '8px',
                                borderRadius: '4px',
                                border: '1px solid #f0f0f0',
                                wordBreak: 'break-word',
                                lineHeight: '1.4'
                            }}>
                                {record.gitLastEditMsg || '-'}
                            </div>
                        </div>
                    </div>
                </div>
            );
            
            return (
                <Tooltip 
                    title={tooltipContent} 
                    placement="topLeft"
                    overlayStyle={{ 
                        border: 'none',
                        background: 'transparent'
                    }}
                    overlayClassName="custom-tooltip"
                    getPopupContainer={(triggerNode) => triggerNode.parentElement || document.body}
                >
                    <span style={{ cursor: 'pointer', borderBottom: '1px dashed #1890ff' }}>
                        {displayDays}
                    </span>
                </Tooltip>
            );
        }
            },
            {
                title: () => (
                    <span>
                        ⏰ 累计创建时间（天）
                    </span>
                ),
                dataIndex: 'gitCreateTime',
                key: 'gitCreateTime',
                width: 130,
                sorter: true,
                sortDirections: ['descend', 'ascend'] as any,
        render: (time: string, record: any) => {
            let displayDays = '-';
            if (time) {
                try {
                    const createDate = new Date(time);
                    if (!isNaN(createDate.getTime())) {
                        const now = new Date();
                        const diffTime = now.getTime() - createDate.getTime();
                        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
                        displayDays = `${diffDays}天`;
                    }
                } catch (error) {
                    displayDays = '-';
                }
            }
            
            // 构建详细信息tooltip
            const tooltipContent = (
                <div style={{ 
                    width: '280px', 
                    textAlign: 'left',
                    backgroundColor: '#ffffff',
                    padding: '16px',
                    borderRadius: '8px',
                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                    border: '1px solid #f0f0f0'
                }}>
                    <div style={{ 
                        fontSize: '14px', 
                        fontWeight: '600', 
                        marginBottom: '12px', 
                        color: '#52c41a',
                        borderBottom: '1px solid #f0f0f0',
                        paddingBottom: '6px'
                    }}>
                        🎉 创建详情
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '60px' }}>创建时间：</span>
                            <span style={{ fontSize: '12px', color: '#262626' }}>
                                {formatTime(record.gitCreateTime)}
                            </span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '60px' }}>提交ID：</span>
                            {record.gitCreateCommitId && unitInfo?.gitRepoUrl ? (
                                <a 
                                    href={`${unitInfo.gitRepoUrl.replace(/\.git$/i, '')}${/gitlab/i.test(unitInfo.gitRepoUrl) ? '/-/commit/' : '/commit/'}${record.gitCreateCommitId}`}
                                    target="_blank" 
                                    rel="noopener noreferrer"
                                    style={{ 
                                        color: '#52c41a', 
                                        fontSize: '12px', 
                                        fontFamily: 'monospace',
                                        textDecoration: 'underline',
                                        padding: '2px 6px',
                                        backgroundColor: '#f6ffed',
                                        borderRadius: '4px',
                                        border: '1px solid #b7eb8f'
                                    }}
                                >
                                    {record.gitCreateCommitId.substring(0, 8)}
                                </a>
                            ) : (
                                <span style={{ 
                                    fontSize: '12px', 
                                    color: '#262626', 
                                    fontFamily: 'monospace',
                                    padding: '2px 6px',
                                    backgroundColor: '#f5f5f5',
                                    borderRadius: '4px'
                                }}>
                                    {record.gitCreateCommitId ? record.gitCreateCommitId.substring(0, 8) : '-'}
                                </span>
                            )}
                        </div>
                        <div>
                            <div style={{ color: '#8c8c8c', fontSize: '12px', marginBottom: '4px' }}>提交信息：</div>
                            <div style={{ 
                                fontSize: '12px', 
                                color: '#262626', 
                                backgroundColor: '#f9f9f9',
                                padding: '8px',
                                borderRadius: '4px',
                                border: '1px solid #f0f0f0',
                                wordBreak: 'break-word',
                                lineHeight: '1.4'
                            }}>
                                {record.gitCreateMsg || '-'}
                            </div>
                        </div>
                    </div>
                </div>
            );
            
            return (
                <Tooltip 
                    title={tooltipContent} 
                    placement="topLeft"
                    overlayStyle={{ 
                        border: 'none',
                        background: 'transparent'
                    }}
                    overlayClassName="custom-tooltip"
                    getPopupContainer={(triggerNode) => triggerNode.parentElement || document.body}
                >
                    <span style={{ cursor: 'pointer', borderBottom: '1px dashed #1890ff' }}>
                        {displayDays}
                    </span>
                </Tooltip>
            );
        }
            }
        ]
    },
    {
        title: '调用信息',
        children: [
            {
                title: () => (
                    <span>
                        📞 累计无调用时长（天）
                    </span>
                ),
                dataIndex: 'noSaCallDurationDays',
                key: 'noSaCallDurationDays',
                width: 150,
                sorter: true,
                sortDirections: ['descend', 'ascend'] as any,
        render: (days: number, record: any) => {
            const displayDays = days !== undefined && days !== null ? `${days}天` : '-';
            
            // 构建详细信息tooltip
            const tooltipContent = (
                <div style={{ 
                    width: '280px', 
                    textAlign: 'left',
                    backgroundColor: '#ffffff',
                    padding: '16px',
                    borderRadius: '8px',
                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                    border: '1px solid #f0f0f0'
                }}>
                    <div style={{ 
                        fontSize: '14px', 
                        fontWeight: '600', 
                        marginBottom: '12px', 
                        color: '#fa8c16',
                        borderBottom: '1px solid #f0f0f0',
                        paddingBottom: '6px'
                    }}>
                        📞 调用详情
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>无调用时长：</span>
                            <span style={{ fontSize: '12px', color: '#262626', fontWeight: '500' }}>
                                {displayDays}
                            </span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>最后调用：</span>
                            <span style={{ fontSize: '12px', color: '#262626' }}>
                                {record.lastInvocationTime || '-'}
                            </span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>首次发现：</span>
                            <span style={{ fontSize: '12px', color: '#262626' }}>
                                {record.firstFoundTime || '-'}
                            </span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>数据更新：</span>
                            <span style={{ fontSize: '12px', color: '#262626' }}>
                                {record.saDataUpdateTime || '-'}
                            </span>
                        </div>
                    </div>
                </div>
            );
            
            return (
                <Tooltip 
                    title={tooltipContent} 
                    placement="topLeft"
                    overlayStyle={{ 
                        border: 'none',
                        background: 'transparent'
                    }}
                    overlayClassName="custom-tooltip"
                    getPopupContainer={(triggerNode) => triggerNode.parentElement || document.body}
                >
                    <span style={{ cursor: 'pointer', borderBottom: '1px dashed #fa8c16' }}>
                        {displayDays}
                    </span>
                </Tooltip>
            );
        }
            },
            {
                title: '首次生产发现时间',
                dataIndex: 'firstFoundTime',
                key: 'firstFoundTime',
                width: 130,
        render: (time: string, record: any) => {
            const displayTime = time || '-';
            
            // 构建详细信息tooltip
            const tooltipContent = (
                <div style={{ 
                    width: '280px', 
                    textAlign: 'left',
                    backgroundColor: '#ffffff',
                    padding: '16px',
                    borderRadius: '8px',
                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                    border: '1px solid #f0f0f0'
                }}>
                    <div style={{ 
                        fontSize: '14px', 
                        fontWeight: '600', 
                        marginBottom: '12px', 
                        color: '#722ed1',
                        borderBottom: '1px solid #f0f0f0',
                        paddingBottom: '6px'
                    }}>
                        🔍 首次发现详情
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>首次发现：</span>
                            <span style={{ fontSize: '12px', color: '#262626', fontWeight: '500' }}>
                                {record.firstFoundTime || '-'}
                            </span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>最后调用：</span>
                            <span style={{ fontSize: '12px', color: '#262626' }}>
                                {record.lastInvocationTime || '-'}
                            </span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>生产状态：</span>
                            <Tag color={record.saExists ? 'green' : 'red'} style={{ margin: 0, fontSize: '11px' }}>
                                {record.saExists ? '已发现' : '未发现'}
                            </Tag>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>数据更新：</span>
                            <span style={{ fontSize: '12px', color: '#262626' }}>
                                {record.saDataUpdateTime || '-'}
                            </span>
                        </div>
                    </div>
                </div>
            );
            
            return (
                <Tooltip 
                    title={tooltipContent} 
                    placement="topLeft"
                    overlayStyle={{ 
                        border: 'none',
                        background: 'transparent'
                    }}
                    overlayClassName="custom-tooltip"
                    getPopupContainer={(triggerNode) => triggerNode.parentElement || document.body}
                >
                    <span style={{ cursor: 'pointer', borderBottom: '1px dashed #722ed1' }}>
                        {displayTime}
                    </span>
                </Tooltip>
            );
        }
            },
            {
                title: '生产调用状态',
                key: 'saStatus',
                width: 120,
        render: (_: any, record: any) => {
            const saExists = record.saExists;
            const lastInvocationTime = record.lastInvocationTime;
            
            // 显示状态
            let statusText = '-';
            let statusColor = 'default';
            
            if (saExists === true) {
                statusText = '已发现';
                statusColor = 'green';
            } else if (saExists === false) {
                statusText = '未发现';
                statusColor = 'red';
            }
            
            // 构建详细信息tooltip
            const tooltipContent = (
                <div style={{ 
                    width: '280px', 
                    textAlign: 'left',
                    backgroundColor: '#ffffff',
                    padding: '16px',
                    borderRadius: '8px',
                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                    border: '1px solid #f0f0f0'
                }}>
                    <div style={{ 
                        fontSize: '14px', 
                        fontWeight: '600', 
                        marginBottom: '12px', 
                        color: saExists ? '#52c41a' : '#ff4d4f',
                        borderBottom: '1px solid #f0f0f0',
                        paddingBottom: '6px'
                    }}>
                        📊 SA数据详情
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>生产发现：</span>
                            <Tag color={statusColor} style={{ margin: 0, fontSize: '11px' }}>
                                {statusText}
                            </Tag>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>首次发现：</span>
                            <span style={{ fontSize: '12px', color: '#262626' }}>
                                {record.firstFoundTime || '-'}
                            </span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>最后调用：</span>
                            <span style={{ fontSize: '12px', color: '#262626' }}>
                                {lastInvocationTime || '-'}
                            </span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span style={{ color: '#8c8c8c', fontSize: '12px', minWidth: '80px' }}>数据更新：</span>
                            <span style={{ fontSize: '12px', color: '#262626' }}>
                                {record.saDataUpdateTime || '-'}
                            </span>
                        </div>
                    </div>
                </div>
            );
            
            return (
                <Tooltip 
                    title={tooltipContent} 
                    placement="topLeft"
                    overlayStyle={{ 
                        border: 'none',
                        background: 'transparent'
                    }}
                    overlayClassName="custom-tooltip"
                    getPopupContainer={(triggerNode) => triggerNode.parentElement || document.body}
                >
                    <Tag color={statusColor} style={{ cursor: 'pointer' }}>
                        {statusText}
                    </Tag>
                </Tooltip>
            );
        }
            }
        ]
    }
];

interface MethodTableProps {
    data: any[];
    pagination: any;
    loading: boolean;
    onChange: (p: any, f: any, s: any) => void;
    unitInfo?: UnitInfoLike | null;
}

const MethodTable: React.FC<MethodTableProps> = ({ data, pagination, loading, onChange, unitInfo }) => (
    <Table
        rowKey="methodSignature"
        columns={getColumns(unitInfo)}
        dataSource={data}
        loading={loading}
        pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: pagination.total,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
        }}
        onChange={onChange}
        bordered
        size="middle"
        scroll={{ x: 1400 }}
        style={{
            background: '#fff',
            borderRadius: '8px',
            overflow: 'hidden'
        }}
        className="grouped-header-table"
    />
);

export default MethodTable; 